<template>
	<view class="page">
		<!-- 绘制二维码 -->
		<canvas canvas-id="qrcode" style="position: absolute;left: -90000rpx;" />

		<view class="demo-block" style="position: absolute;left: -99999rpx;">
			<view class="demo-block__title">栗子海报{{ poster }}</view>
			<view v-if="canDraw">
				<l-painter
					:custom-style="'transform: scale(' + 343 / 375 + '); transform-origin: left top;'"
					isBase64ToPath
					isRenderImage
					:board="board"
					@success="poster = $event"
					@fail="fail"
				></l-painter>
			</view> 
		</view>
		<button type="default" @tap="open">分享朋友圈</button>

		<u-popup v-model="isShowPopup" mode="center" width="600" height="1000">
			<view class="my-poster-wrap">
				<image @tap="priviewImg" v-show="poster" :src="poster" mode="widthFix" style="width: 100%; height: 100%; display: block;"></image>
				<view v-if="!poster" class="my-skeleton--animate my-poster">
					<view class="my-poster-header">
						<view class="my-skeleton my-poster-header__avatar"></view>
						<view class="my-poster-header__info">
							<view class="my-skeleton my-poster-header__info-name"></view>
							<view class="my-skeleton my-poster-header__info-tips"></view>
						</view>
					</view>
					<view class="my-poster-body">
						<view class="my-skeleton my-poster-body__pic"></view>
						<view class="my-skeleton my-poster-body__price"></view>
					</view>
					<view class="my-poster-footer">
						<view class="my-poster-footer__title">
							<view class="my-skeleton"></view>
							<view class="my-skeleton"></view>
						</view>
						<view class="my-skeleton my-poster-footer__qr"></view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import lPainter from '@/components/painter/index.vue';
import QRCode from '@/common/qrcode.js';
import { base64ToPath } from '@/components/painter/utils.js';
export default {
	components: { lPainter },
	data() {
		return {
			failText: '',
			poster: '',
			path: '',
			isShowPopup: false,
			posterCss: {},
			canDraw: false,
			board: {
				width: '750rpx',
				height: '1114rpx',
				background: 'linear-gradient(135deg, #ff971b 0%, #ff5000 100%)',
				views: [
					{
						type: 'view',
						css: {
							left: '40rpx',
							top: '144rpx',
							background: '#ffffff',
							radius: '16rpx',
							width: '670rpx',
							height: '930rpx',
							shadow: '0 20rpx 48rpx rgba(0,0,0,.05)'
						}
					},
					{
						type: 'text',
						text: '隔壁老蔡',
						css: {
							color: '#ffffff',
							left: '144rpx',
							top: '40rpx',
							fontSize: '32rpx',
							fontWeight: 'bold'
						}
					},
					{
						type: 'text',
						text: '为您挑选了一个好物',
						css: {
							color: 'rgba(255,255,255,.7)',
							left: '144rpx',
							top: '90rpx',
							fontSize: '24rpx'
						}
					},
					{
						type: 'image',
						url: '/static/my/bg2.png',
						css: {
							left: '72rpx',
							top: '176rpx',
							width: '606rpx',
							height: '606rpx',
							radius: '12rpx'
						}
					},
					{
						type: 'view',
						css: {
							height: '58rpx',
							color: '#FF0000',
							left: '66rpx',
							top: '812rpx',
							fontWeight: 'bold',
							fontSize: '28rpx',
							lineHeight: '.61em',
							verticalAlign: 'bottom'
						},
						views: [
							{
								type: 'text',
								text: '￥',
								css: {}
							},
							{
								type: 'text',
								text: '39',
								css: {
									fontSize: '58rpx'
								}
							},
							{
								type: 'text',
								text: '.39',
								css: {}
							},
							{
								type: 'text',
								text: '￥59.39',
								css: {
									paddingLeft: '20rpx',
									fontWeight: 'normal',
									textDecoration: 'line-through',
									color: '#999'
								}
							}
						]
					},
					{
						type: 'text',
						text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝',
						css: {
							maxLines: 2,
							width: '396rpx',
							color: '#333333',
							left: '72rpx',
							top: '948rpx',
							fontSize: '36rpx',
							lineHeight: '50rpx'
						}
					}
				]
			}
		};
	},
	computed: {},
	mounted() {
		this.generateQRcode();
	},
	methods: {
		// 生成二维码
		async generateQRcode() {
			let qrcode = new QRCode({
				context: this, // 上下文环境
				canvasId: 'qrcode', // canvas-id
				usingComponents: true, // 是否是自定义组件
				showLoading: false, // 是否显示loading
				text: 'https://www.wudada.top/mp?id=123', // 生成内容
				size: 100, // 二维码大小
				width: 100,
				height: 100,
				background: '#ffffff', // 背景色
				foreground: '#00aaff', // 前景色
				pdground: '#00aa00', // 定位角点颜色
				correctLevel: 3, // 容错级别
				image: '/static/index/user.png', // 二维码图标
				imageSize: 30, // 二维码图标大小
				cbResult: res => {
					// 生成二维码的回调
					this.board.views[3].url = res;
					this.canDraw = true;
				}
			});
		},
		priviewImg(e) {
			uni.previewImage({
				current: this.poster,
				urls: [this.poster]
			});
			console.log(e);
		},
		fail(v) {},
		saveImage() {
			this.isShowPopup = false;
			uni.showLoading({
				title: '保存中'
			});
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					});
				}
			});
		},
		open() {
			this.isShowPopup = true;
			// if (this.poster) return;
		},
		async onRender() {
			// 支持通过调用render传入参数
			const painter = this.$refs.painter;
			painter.render(this.base);
		},
		onCanvasToTempFilePath() {
			const painter = this.$refs.painter;
			// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
			painter.canvasToTempFilePath().then(res => (this.path = res.tempFilePath));
		}
	}
};
</script>

<style lang="stylus" scoped>
.page
	background #fff
.my-poster-wrap
	width 80vw
	background-color #fff
	border-radius 20rpx
.my-poster
	padding 40rpx 64rpx
.my-poster-header
	display flex
	align-items center
	margin-bottom 36rpx
.my-poster-header__avatar
	height 64rpx
	width 64rpx
	border-radius 50%
	margin-right 16rpx
.my-poster-header__info, .my-poster-header__info-name
	width 136rpx
	height 28rpx
	margin-bottom 12rpx
.my-poster-header__info-tips
	width 172rpx
	height 20rpx
.my-poster-body, .my-poster-body__pic
	height 450rpx
.my-poster-body__price
	height 28rpx
	width 152rpx
	margin-top 24rpx
.my-poster-footer
	margin-top 40rpx
	display flex
.my-poster-footer__title
	flex 1
	margin-right 24rpx
	display flex
	flex-direction column
	justify-content flex-end
.my-poster-footer__title .my-skeleton
	height 28rpx
	margin-top 20rpx
.my-poster-footer__qr
	width 120rpx
	height 120rpx
.my-poster__action
	position fixed
	left 50%
	bottom 40rpx
	transform translateX(-50%)
	z-index 9999997
	height 88rpx
	width 60%
	background linear-gradient(to right, #FF004E, #FF4242)
	color #fff
	display flex
	align-items center
	justify-content center
	border-radius 200rpx
// .my-poster__action-button
// display flex
// width 100rpx
// height 100rpx
// background-color #ff7900
// border-radius 50%
// align-items center
// justify-content center
.my-skeleton
	background-color #f2f3f5
.my-skeleton--animate
	animation my-skeleton-blink 1.2s ease-in-out infinite
@keyframes my-skeleton-blink
	50%
		opacity 0.6
</style>
